<style include="common cros-button-style">
  #container {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    height: 100%;
  }
  #promoImageContainer {
    clip-path: url(#starClip);
    height: 100%;
    margin: 10px 0 10px 10px;
    max-height: 52px;
    max-width: 52px;
    overflow: hidden;
    width: 100%;
  }
  #promoImageContainer img {
    height: 100%;
    object-fit: fill;
    width: 100%;
  }
  #textContainer {
    display: flex;
    flex-flow: column wrap;
    margin: 10px 0 10px 10px;
  }
  #bannerTitle {
    color: var(--cros-text-color-primary);
    font: var(--cros-headline-1-font);
  }
  #bannerDescription {
    color: var(--cros-text-color-secondary);
    font: var(--cros-body-2-font);
  }
  #bannerDescription > a {
    color: var(--cros-link-color);
  }
  #bannerTitle + #bannerDescription {
    margin-top: 2px;
  }
  #dismissButton {
    background-color: unset;
    margin-inline-end: 10px;
    margin-inline-start: auto;
  }
</style>
<div id="container" class="preview-container">
  <!-- Use inline svg in order to reference the clip path by url() -->
  <svg width="0" height="0" viewBox="0 0 52 52" fill="none"
      xmlns="http://www.w3.org/2000/svg">
    <defs>
      <clipPath id="starClip">
        <path d="M41.4932 6.84916C43.5224 6.98706 45.1379 8.60256 45.2758 10.6318L45.6768 16.5327C45.737 17.4194 46.0861 18.262 46.6705 18.9316L50.5595 23.3877C51.8968 24.9201 51.8968 27.2048 50.5595 28.7372L46.6705 33.1933C46.0861 33.8629 45.737 34.7055 45.6768 35.5922L45.2758 41.4931C45.1379 43.5223 43.5224 45.1378 41.4932 45.2757L35.5923 45.6767C34.7055 45.737 33.863 46.086 33.1933 46.6704L28.7372 50.5594C27.2048 51.8968 24.9202 51.8968 23.3878 50.5594L18.9317 46.6704C18.262 46.086 17.4195 45.737 16.5327 45.6767L10.6318 45.2757C8.60261 45.1378 6.98711 43.5223 6.84922 41.4931L6.44821 35.5922C6.38796 34.7055 6.03895 33.8629 5.45455 33.1933L1.56553 28.7372C0.228158 27.2048 0.228158 24.9201 1.56553 23.3877L5.45455 18.9316C6.03895 18.262 6.38796 17.4194 6.44822 16.5327L6.84921 10.6318C6.98711 8.60256 8.60261 6.98706 10.6318 6.84916L16.5327 6.44816C17.4195 6.3879 18.262 6.03889 18.9317 5.45449L23.3878 1.56548C24.9202 0.228104 27.2048 0.228104 28.7372 1.56548L33.1933 5.45449C33.863 6.03889 34.7055 6.3879 35.5923 6.44816L41.4932 6.84916Z"></path>
      </clipPath>
    </defs>
  </svg>
  <div id="promoImageContainer">
    <img auto-src="$i18n{timeOfDayBannerImageUrl}" is="cr-auto-img">
  </div>
  <div id="textContainer">
    <span id="bannerTitle">
      $i18n{timeOfDayBannerTitle}
    </span>
    <span id="bannerDescription"
        inner-h-t-m-l="[[i18nAdvanced('timeOfDayBannerDescription')]]">
    </span>
  </div>
  <cr-button class="secondary"
      id="dismissButton" on-click="onDismissClick_">
    $i18n{dismiss}
  </cr-button>
</div>
